<template>
	<div id="cityPage">
		<div class="search">
			<div><span class="iconfont sign">&#xe609;</span></div>
			<div class="search_left">
				<mu-text-field v-model="search" hintText="北京/beijing/bj" fullWidth/>
			</div>
			<div class="cancel" @click="cancel"><span v-show='search'>取消</span></div>
			<div class="searchResult" v-show="searchPanle">
				<ul>
					<li @click="seclectCity(item)" v-for="item in searchResult" class="cell">{{ item.name }}</li>
				</ul>
			</div>
		</div>
		<div>
			<mu-tabs lineClass="activeLine" class="cityTab" :value="activeTab" @change="handleTabChange">
				<mu-tab titleClass="cityType" value="inland" title="国内" />
				<mu-tab titleClass="cityType" value="internation" title="国际" />
			</mu-tabs>
		</div>
		<!--——————————————————————————————————————————————————————————————————-->
		<div class="allCity" ref='allCity'>
			<div class="indexList">
				<div class="hot">
					<p class="hotTitle">热门城市</p>
					<ul>
						<li class='hotCity' v-for='item in hot'>
							<div @click="seclectCity(item)" class='cityName'>{{item.name}}</div>
						</li>
					</ul>
				</div>
				<ul class="indexlist-content">
					<li class="indexsection indexsection-hook" v-for="(value,key,index) in data">
						<!--<p class="indexsection-index">{{key}}</p>
						<ul>
							<li class="cell" v-for="item in value">
								<div class="cell-left" @click="seclectCity(item)">{{item.name}}</div>
							</li>
						</ul>-->
						<p class="indexsection-index">{{key}}</p>
						<div v-for="item in value" class="cell" @click="seclectCity(item)">
							{{item.name}}
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!--字母序列与当前字母-->
		<div>
			<div class="indexlist-nav">
				<ul class="indexlist-navlist">
					<li @click="seclectIndex(key,index)" class="indexlist-navitem" v-for="(value,key,index) in data" :class="{'active':currentIndex===index}">{{key}}</li>
				</ul>
			</div>
			<div v-show="indicatorShow" class="indexlist-indicator">{{indexValue}}</div>
		</div>
		<!--国际————————————————————————————————————————————————————————————————————-->
		<!--字母序列与当前字母-->
		<!--<div v-if="activeTab === 'internation'">
			<div class="indexlist-nav">
				<ul class="indexlist-navlist">
					<li @click="chooseIndexValue(i,$event)" class="indexlist-navitem" v-for="i in cityData">{{i}}</li>
				</ul>
			</div>
			<div v-show="indicatorShow" class="indexlist-indicator">{{indexValue}}</div>
		</div>
		<div class="internation" ref='internation' v-if="activeTab === 'internation'">
			<div class="indexList">
				<ul class="indexlist-content">
					<li class="indexsection" v-for="i in ['A','B','C','D','E','F']">
						<p class="indexsection-index">{{i}}</p>
						<ul>
							<li @click="chooseCity(i)" class="cell" v-for="i in [1,2,3,4,5,6,7,8]">
								<div class="cell-left">{{i}}</div>
								<div class="cell-wrapper">
									<div class="cell-title"></div>
									<div class="cell-value"></div>
								</div>
								<div class="cell-right"></div>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>-->
	</div>
</template>

<script>
	import main from './main';
	export default {
		...main
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	@import '../../style/mixin.scss';
	@import "./style.scss";
</style>